<template>
	<view class="system">
		<view class="form">
			<view class="avatar flex_conter_c">
				<view class="avatarBox" @click="clk">
					<image class="image" :src="form.avatar" mode="aspectFill"></image>
					<!-- <avatar 
						selWidth="180rpx" selHeight="180rpx" @upload="doUpload" :avatarSrc="form.avatar" :inner="true"
						avatarStyle="width: 180rpx; height: 180rpx; border-radius: 100%;">
					</avatar> -->
					<view class="mask">
						<text class="custom-icon custom-icon-xiangji"></text>
					</view>
				</view>
			</view>
			<u-form-item label="昵称">
				<u-input v-model="form.user_nickname" placeholder="输入昵称" />
			</u-form-item>
		</view>
		
		<view class="btnBox">
			<button class="btn" type="default" hover-class="none" @click="save">保存</button>
		</view>
		
		<avatar @upload="doUpload" quality="1" ref="avatar" selWidth="300rpx" selHeight="300rpx"></avatar>
	</view>
</template>

<script>
	import avatar from "@/components/yq-avatar.vue";
	var util = require('../../common/util.js');
	export default {
		components: {
			avatar
		},
		data() {
			return {
				form: {
					avatar: '',
					user_nickname: ''
				},
				old_avatar:""
			}
		},
		onLoad(options) {
			this.loadData();
		},
		methods: {
			loadData: function(){
				// 加载数据
				var that = this;
				this.is_loading = true;
				util.requestPost("api.php/user/getUserMsg", {}, function(res) {
					that.form.avatar = res.data.user_headimg;
					that.old_avatar = res.data.user_headimg;
					that.form.user_nickname = res.data.user_nickname;
				});
			},
			clk () {
				this.$refs.avatar.fChooseImg(1,{
					selWidth: '300rpx', selHeight: '300rpx', inner: true
				});
			},
			doUpload(rsp) {
				this.form.avatar = rsp.path
				// this.$set(this.urls, rsp.index, rsp.path);
			},
			save(){
				// 保存
				console.log(this.old_avatar);
				console.log(this.form.avatar);
				if(this.old_avatar == this.form.avatar){
					// 未更新头像
					util.requestPost("api.php/user/updateUserMsg", {user_nickname:this.form.user_nickname}, function(res) {
						util.toast("更新成功！");
						setTimeout(() => {
						  uni.navigateBack();
						}, 1000);
					},true);
				}else{
					// 更新了头像
					util.uploadSigleFilePost(
					      'api.php/user/updateUserMsg',
					      this.form.avatar,
					      "image",
					      "head_img",
					      {user_nickname:this.form.user_nickname},
					      function(res){
					        util.toast("更新成功！");
					        setTimeout(() => {
					          wx.navigateBack();
					        }, 1000);
					      },
						  true
					    );
				}
			}
		}
	}
</script>

<style scoped>
.system {
	min-height: 100%;
	background-color: var(--bgColor);
}
.form {
	background-color: #FFFFFF;
	padding: 0 30rpx;
}
.avatar {
	padding: 30rpx 0;
}
.avatar .avatarBox {
	width: 180rpx;
	height: 180rpx;
	border-radius: 180rpx;
	overflow: hidden;
	position: relative;
}
.avatar .avatarBox .image {
	width: 180rpx;
	height: 180rpx;
}
.avatar .avatarBox .mask {
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	text-align: center;
	color: #FFFFFF;
	font-size: 28rpx;
	padding: 8rpx 0;
}

.btnBox {
	padding: 30rpx;
}
.btnBox .btn {
	border-radius: 60rpx;
	color: #FFFFFF;
	font-size: 32rpx;
	background: var(--btnBgColor);
}
</style>